<%@ page import="com.hrpmar.utils.Constants" %><%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2017/12/1
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%@page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh-cmn">
<head>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>Document</title>
    <%@include file="/WEB-INF/jsp/header.jsp"%>
    <style type="text/css">
        div#strong span{
            display: inline-block;
            width: 20px;
            height: 10px;
            margin: 12px 5px;
            border: 1px solid #666;
        }
        div#strong span.red{
            margin-left: -10px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-info">
    <div class="panel-heading">
        <p>个人中心>>修改密码</p>
    </div>
    <div class="panel-body" style="padding: 50px 0px;">
    <form id="Form" class="form-horizontal col-md-12">
        <div class="form-group">
            <label class="control-label col-md-5">当前密码:</label>
            <div class="form-group col-md-3">
                <input onkeyup="checkLandPwd()" onblur="checkLandPwd()" name="landPwd" placeholder="请输入原密码" class="form-control" type="password"/>
            </div>
            <p class=" col-md-3" style="line-height: 34px; ">
                <i style="color: red;">*</i>
                <span id="error_landPwd"></span>
            </p>
        </div>
        <div class="form-group">
            <label class="control-label col-md-5">新密码:</label>
            <div class="form-group col-md-3">
                <input onblur="checknewLandPwd()" onkeyup="strong()" name="newlandPwd" placeholder="请输入新密码" class="form-control" type="password" />
            </div>
            <p class=" col-md-3" style="line-height: 34px; ">
                <i style="color: red;">*</i>
                <span id="error_newlandPwd">6-18位数字或字符</span>
            </p>
        </div>
        <div class="form-group" style="height: 50px; ">
            <label class="control-label col-md-5">密码强度:</label>
            <div id="strong" class="col-md-4">
                <span class="red"></span><span class="yellow"></span><span class="green"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-5">确认新密码:</label>
            <div class="form-group col-md-3">
                <input onkeyup="checkrenewLandPwd()" onblur="checkrenewLandPwd()" name="renewlandPwd" placeholder="请再次输入新密码" class="form-control" type="password" />
            </div>
            <p class=" col-md-3" style="line-height: 34px; ">
                <i style="color: red;">*</i>
                <span id="error_renewlandPwd"></span>
            </p>
        </div>
        <div class="form-group">
            <div class="col-md-5"></div>
            <button style="margin-right: 100px;" onclick="updatePwd()" type="button" class="btn btn-info">修改</button>
            <button type="button" onclick="hh()" class="btn btn-info">重置</button>
        </div>
    </form>
    </div>
</div>
</div>
<%@include file="/WEB-INF/jsp/footer.jsp"%>
<script>
    function hh() {
        $("#Form input").val("");
        $("span").html("")
        $("#Form span").attr("style","");
    }
    //表单验证
    function checkLandPwd() {
        var landPwd = $("input[name=landPwd]").val();
        $("span#error_landPwd").html(" ").css("color","red");
        if(landPwd==""){
            $("span#error_landPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>当前密码不可以为空!</span>');
            return false;
        }
        if(landPwd!="${sessionScope.loginUser.landPwd}"){
            $("span#error_landPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>当前密码不正确!</span>');
            return false;
        }
        $("span#error_landPwd").html('<i class="layui-icon" style="color:green;"></i>');
        return true;
    }

    function checknewLandPwd() {
        var newlandPwd = $("input[name=newlandPwd]").val();
        var renewlandPwd = $("input[name=renewlandPwd]").val();
        $("span#error_renewlandPwd").html(" ").css("color","red");
        $("span#error_newlandPwd").html(" ").css("color","red");
        if(renewlandPwd!=""){
            if(renewlandPwd!=newlandPwd){
                $("span#error_renewlandPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>两次输入的密码不同!</span>');
            }else {
                $("span#error_renewlandPwd").html('<i class="layui-icon" style="color:green;"></i>');
            }
        }

        if(newlandPwd==""){
            $("span#error_newlandPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>新密码不可以为空!</span>');
            return false;
        }
        if(newlandPwd.length<6){
            $("span#error_newlandPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>新密码长度不能小于6位!</span>');
            return false;
        }
        $("span#error_newlandPwd").html('<i class="layui-icon" style="color:green;"></i>');
        return true;
    }

    function checkrenewLandPwd() {
        var renewlandPwd = $("input[name=renewlandPwd]").val();
        var newlandPwd = $("input[name=newlandPwd]").val();
        $("span#error_renewlandPwd").html(" ").css("color","red");
        if(renewlandPwd==""){
            $("span#error_renewlandPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>确认密码不可以为空!</span>');
            return false;
        }
        if(renewlandPwd!=newlandPwd){
            $("span#error_renewlandPwd").html('<i class="layui-icon" style="color:red;">ဇ</i>&nbsp;<span>两次输入的密码不同!</span>');
            return false;
        }
        $("span#error_renewlandPwd").html('<i class="layui-icon" style="color:green;"></i>');
        return true;
    }

    function strong() {
            $("div#strong span.red").css({"border":"1px solid #666","background-color":"#fff"});
            $("div#strong span.green").css({"border":"1px solid #666","background-color":"#fff"});
            $("div#strong span.yellow").css({"border":"1px solid #666","background-color":"#fff"});
            var level = 0;
            var pass = $("input[name=newlandPwd]").val();
            if(/[0-9]/.test(pass)){
                level++;
            }
            if(/[a-z]/.test(pass)){
                level++;
            }
            if(/[\W]/.test(pass)){
                level++;
            }
            if(!checknewLandPwd()){
                return;
            }
            if(level == 1){
                $("div#strong span.red").css({"border":"1px solid red","background-color":"red"});
                $("div#strong span.green").css({"border":"1px solid #666","background-color":"#fff"});
                $("div#strong span.yellow").css({"border":"1px solid #666","background-color":"#fff"});
            }else if(level == 2){
                $("div#strong span.red").css({"border":"1px solid #FF972F","background-color":"#FF972F"});
                $("div#strong span.green").css({"border":"1px solid #666","background-color":"#fff"});
                $("div#strong span.yellow").css({"border":"1px solid #FF972F","background-color":"#FF972F"});
            }else if(level == 3){
                $("div#strong span.red").css({"border":"1px solid #61CC1F","background-color":"#61CC1F"});
                $("div#strong span.green").css({"border":"1px solid #61CC1F","background-color":"#61CC1F"});
                $("div#strong span.yellow").css({"border":"1px solid #61CC1F","background-color":"#61CC1F"});
            }
    }

    function checkSubmit() {
        var landPwd = checkLandPwd();
        var newlandPwd = checknewLandPwd();
        var renewlandPwd = checkrenewLandPwd();
        if (landPwd&&newlandPwd&&renewlandPwd){
            return true;
        }
        return false;
    }

    function updatePwd() {
        var woId=${sessionScope.loginUser.woId};
        var newLandPwd = $("input[name=newlandPwd]").val();
        if(!checkSubmit()){
            return;
        }
        swal({
            title:"信息提示",
            text:"确认要修改密码吗?",
            type:"warning",
            showCancelButton:true,
            confirmButtonText:"修改",
            confirmButtonColor:"#dd0c12",
            cancelButtonText: "取消"
        }).then(function() {
            $.post(ctx + "/user/updatePwd", "woId=" + woId + "&newlandPwd=" + newLandPwd, function (msg) {
                if(msg==""){
                    location.href = "${ctx}/updateSuccess";
                }else {
                    swal({
                        title:msg,
                        type:"warning",
                        confirmButtonText:"确定",
                        confirmButtonColor:"#dd0c12",
                    });
                }
            });
        })
    }
    
</script>
</body>
</html>
